<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>发现</title>

    <link rel="stylesheet" href="../../../layui.css">
    <style>
        .lyx-flex {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px;
        }
    </style>
</head>
<body>

<div style="margin: 15px;">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">搜索好友</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="输入好友姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="*">查找</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-row" id="friendHtml">

        </div>
    </div>
</div>


<script src="../../../../layui.js"></script>
<script>
	var base_url = 'https://txy.sylyx.cn/Api/Api/'

	function itemx (data) {
		console.log(data)
		var html = ['<div class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-row lyx-flex">',
			'                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">',
			'                    <img src="' + data.avatar + '"',
			'                         class="layui-circle" style="width: 50px;height: 50px">',
			'                </div>',
			'                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">',
			'                    <p>' + data.name + '</p>',
			'                </div>',
			'                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">',
			'                    <button class="layui-btn layui-btn-sm add-friend" data-avatar="' + data.avatar + '" data-name="' + data.name + '" data-id="' + data.user_id + '">添加</button>',
			'                </div>',
			'            </div>',
			'            <hr class="layui-bg-gray">'].join("");
		return html;
	}

	layui.use(['layim', 'laypage', 'form'], function () {
		var layim = layui.layim
			, layer = layui.layer
			, laytpl = layui.laytpl
			, $ = layui.jquery
			, laypage = layui.laypage
			, form = layui.form;

		function addFriendAction () {
			$(".add-friend").off().on('click', function () {
				var id = $(this).data('id');
				var name = $(this).data('name');
				var avatar = $(this).data('avatar');
				layim.add({
					type: 'friend' //friend：申请加好友、group：申请加群
					, username: name //好友昵称，若申请加群，参数为：groupname
					, avatar: avatar //头像
					, submit: function (group, remark, index) { //一般在此执行Ajax和WS，以通知对方
						console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
						console.log(remark); //获取附加信息
						sendAddFriend(id, group, remark)
						layer.close(index); //关闭改面板
					}
				});
			})
		}

		function sendAddFriend (id, group, remark) {
			var self_user = localStorage.getItem('rong_current_user');
			$.ajax({
				url: base_url + 'addRongCloudUser',
				data: { friend_id: id, self_user: self_user, remark: remark, group: group },
				type: 'post',
				dataType: 'json',
				success: function (ret) {
					if (ret.status == 1) {
						layer.msg('申请发送成功');
					}else{
						layim.msg(ret.msg);
                    }
				}
			})
		}

		//一些添加好友请求之类的交互参见文档
		form.on('submit(*)', function (data) {
			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			var in_html = '';
			$.ajax({
				url: base_url + 'selectRongCloudUsers',
				data: { name: data.field.title },
				dataType: 'json',
				success: function (ret) {
					if (ret.status == 1) {
						$.each(ret.result, function (index, item) {
							in_html += itemx(item);
						})
					} else {
						in_html = '没有搜索到用户!'
					}
					$('#friendHtml').html(in_html);
					if (in_html !== '没有搜索到用户')
						addFriendAction()
				}
			})
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});


</script>
</body>
</html>
